import Vue from "vue";
import Vuex from "vuex"; // npm i vuex@3

import modules from "./modules/index";

// 安装Vuex插件
Vue.use(Vuex);

/*
  如果在一个文件开发vuex，会导致以下问题：
    1. git冲突
    2. 代码太多，不好维护
    3. 命名冲突
    等
  解决：vuex的模块化
    每个人开发自己的vuex模块，每个vuex模块之间互不影响
*/

// 创建&暴露出去
export default new Vuex.Store({
  // 全局的数据和方法
  // state: {},
  // getters: {},
  // actions: {},
  // mutations: {},
  /*
    定义vuex的模块:
      modules: {
        home: { // home vuex模块
          state: {},
          getters: {},
          actions: {},
          mutations: {}
        },
        about: { // about vuex模块
          state: {},
          getters: {},
          actions: {},
          mutations: {}
        }
      }

    使用modules模块化后，vuex的state数据结构就发生了变化
      state: {
        home: { msg: 'hello home' },
        about: { num: 0 }
      }
  */
  modules,

  // 不建议
  // modules: {
  //   home: {
  //     // home vuex模块
  //     state: {},
  //     getters: {},
  //     actions: {},
  //     mutations: {},
  //   },
  //   about: {
  //     // about vuex模块
  //     state: {},
  //     getters: {},
  //     actions: {},
  //     mutations: {},
  //   },
  // },
});
